<script setup>
import { ref, watch } from 'vue'
// 多个数据的侦听
const num = ref(0)
const str = ref('123')
const stop = watch(
  [num, str],
  newval => {
    console.log(newval)
  },
  {
    immediate: true
  }
)
// 侦听复杂数据类型,deep:true
const obj = ref({
  name: 'zs',
  age: 18
})
watch(
  obj,
  newVal => {
    console.log('侦听复杂数据类型', newVal)
  },
  {
    deep: true
  }
)
// flush配制(了解)  pre:渲染前执行回调（默认）  post:渲染后执行回调  sync:修改一次执行一次回调
const xxx = ref('abc')
watch(
  xxx,
  newVal => {
    console.log('flush侦听', document.querySelector('#xxx').innerHTML)
  },
  {
    flush: 'sync'
  }
)
function xxxSet () {
  xxx.value = Date.now()
  xxx.value = '112'
}
// 侦听对象中的某个属性  watch(()=>对象中某个属性,(newVal)=>{},{deep....})
const newObj = ref({
  name: 'zs',
  age: 18
})
watch(
  () => newObj.value.name,
  newVal => {
    console.log('侦听对象中的某个属性')
  }
)
</script>
<template>
  <div>
    <h3>多个数据的侦听</h3>
    num: <input type="text" v-model="num" />
    <br />
    str:
    <input type="text" v-model="str" />
    <button @click="stop">中止watch</button>
    <h3>侦听复杂数据类型</h3>
    <input type="text" v-model="obj.name" />
    <h3>flush:了解</h3>
    <div id="xxx">{{ xxx }}</div>
    <button @click="xxxSet">修改abc</button>
    <h3>watch侦听对象中的某个属性</h3>
    <input type="text" v-model="newObj.name" />
    <input type="text" v-model="newObj.age" />
  </div>
</template>
<style></style>
